<template>
  <div class="question-lib w80 mg0auto">
    <div>单选题：{{ state.singleChoice }}</div>
    <div>多选题：{{ state.multipleChoce }}</div>
    <div>简答题：{{ state.textareaSelected }}</div>
    <div>搜索</div>
    <div><button @click="fnSubmit">确定</button></div>
    <LibListForPaper
      v-for="(item, index) in state.questions"
      :key="index"
      :msg="item"
      @item-selected="fnItemSelected"
    />
    <Pagination class="mgt20p" />
  </div>
</template>

<script>
import { reactive } from "vue";
import LibListForPaper from "../components/Box/QuestionLibBox/LibListForPaper.vue";
import Pagination from "../components/Box/Pagination/Pagination.vue";
import { post_ } from "../http/api.js";
import message from "../components/Box/Message/Message.js";
import { localStore, localData } from "/@/http/store.js";

export default {
  // 父组件传值
  props: {
    msg: String,
  },
  // 组件
  components: {
    LibListForPaper,
    Pagination,
  },
  // 钩子
  setup(props) {
    // 双向绑定数据
    const state = reactive({
      questions: [],
      singleChoice: [], // 单选选择
      multipleChoce: [], // 多选选择
      textareaSelected: [], // 简答题选择
    });
    // 题库变更
    const fnLibChange = (val) => {
      fnGetQuestions(val); // 查询题库
      localStore("qlib", val); // 本地存储问题库ID
    };
    // 获取问题列表
    const fnGetQuestions = (val) => {
      post_("api/pub/getQuestions", {
        id: 0,
        lib: val,
      }).then((res) => {
        message.run("列表查询成功！");
        state.questions = res;
      });
    };
    // 题目选择
    const fnItemSelected = (val) => {
      if (val.type === "SingleChoice") {
        let se = new Set(state.singleChoice);
        se.add(val.id);
        state.singleChoice = [...se];
        return;
      }
      if (val.type === "MultipleChoice") {
        let se = new Set(state.multipleChoce);
        se.add(val.id);
        state.multipleChoce = [...se];
        return;
      }
      if (val.type === "Textarea") {
        let se = new Set(state.textareaSelected);
        se.add(val.id);
        state.textareaSelected = [...se];
        return;
      }
    };
    // 提交
    const fnSubmit = () => {
      // 问题列表
      let questionList = [
        ...state.singleChoice,
        ...state.multipleChoce,
        ...state.textareaSelected,
      ];
      // 试卷描述
      let testPaper = {
        title: "标题：建立试卷",
        describe: "描述：建立试卷",
        deadLine: "2021-12-12 12:00:00",
        answerTime: 15,
      };
      post_("api/createPaper", {
        questions: questionList,
        testPaper: testPaper,
      });
    };
    // 输出到模板
    return {
      state,
      fnLibChange,
      fnGetQuestions,
      fnItemSelected,
      fnSubmit,
    };
  },
  // 钩子
  created() {
    // 查询题库问题列表
    this.fnGetQuestions(this.$route.params.id);
  },
};
</script>

<style scoped>
div {
  color: #fff;
}
</style>
